<template>
  <div>
    <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="createdTime" label="创建时间">
      <template #default="{row}">
        {{(row.createdTime).substring(0,10)}}
      </template>
    </el-table-column>
    <el-table-column prop="nickName" label="姓名"/>
    <el-table-column prop="userName" label="账号"/>
    <el-table-column prop="roleName" label="角色"/>
    <el-table-column prop="userState" label="状态">
      <template #default="{row}">
        <el-text v-if="row.userState==1">正常</el-text>
        <el-text v-else>停用</el-text>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="{row}">
          <el-button>编辑</el-button>
          <el-button>重置密码</el-button>
          <el-button @click="update(row.userId)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios'
import {ref,reactive,onMounted} from 'vue'
import {ElMessage,ElMessageBox} from 'element-plus'
import {useRoute,useRouter} from 'vue-router'
const route=useRoute()
const router=useRouter()

//删除
const update=(userId:any)=>{
  ElMessageBox.confirm(
    '确定要删除吗?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => { 
      axios.delete('http://localhost:31796/api/Users/DeleteUpdate?userId='+userId).then(res=>{
    if(res.data.code==200){
      ElMessage.success('删除成功');
      getList();
    }else{
      ElMessage.error('删除失败');
      return;
    }
  }).catch(err=>{
    console.log(err);  
  })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消',
      })
    })
}

//显示用户列表哈哈哈嘻嘻嘻
const tableData=ref([])
const getList=()=>{
  axios.get('http://localhost:48637/api/Account/GetUser').then(res=>{
    tableData.value=res.data.data
  }).catch(err=>{
    console.log(err);
  })
}

//构造函数
onMounted(()=>{
  getList();
})
</script>

<style scoped>

</style>